<template>
  <div class="main">
    <el-alert title="注意：只允许为三级分类设置属性！！！" type="success" show-icon />

    选择分类：<el-select v-model="value" class="m-2" placeholder="Select">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="first">

        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="" label="" width="50"/>
          <el-table-column prop="" label="#id" width="180" />
          <el-table-column prop="" label="参数名称" width="180" />
          <el-table-column prop="" label="操作" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="second">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="" label="" width="50" />
          <el-table-column prop="" label="#id" width="180" />
          <el-table-column prop="" label="参数名称" width="180" />
          <el-table-column prop="" label="操作" />
        </el-table>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script setup>
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const tableData = []
</script>

<style>
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}

.main {
  padding: 0px 20px;
  background-color: #f1f1f1;
}
</style>